<template>
  <view class="index-page">
    <u-navbar
      title="我的银行卡"
      :background="{ background: '#111723' }"
      back-icon-color="#fff"
      title-color="#fff"
      :title-bold="true"
      :border-bottom="false"
    ></u-navbar>
    <view class="lb-1">
      <view class="lb-2">
        <view class="lb-3"
          >我的卡<view class="lb-4">（共{{ state.list.length }}张）</view>
        </view>
        <view class="lb-5" @click="addbank">+添加银行卡</view>
      </view>

      <view
        class="lb-6"
        v-if="state.list.length"
        v-for="(item, index) in state.list"
        :key="index"
      >
        <view class="lb-7">
          <image src="@/static/images/yinhkbj.png" mode=""></image>
        </view>
        <view class="lb-8">
          <view class="lb-9">
            <view class="lb-10">
              <image :src="item.logo" mode=""></image>
            </view>
            <view class="lb-11">
              <view class="lb-12">{{ item.bank_name }}</view>
              <view class="lb-13">{{ item.type }}</view>
            </view>
          </view>
          <view class="lb-14">
            <view class="lb-15"
              >****{{
                item.account.substring(
                  item.account.length - 4,
                  item.account.length
                )
              }}
            </view>
            <!-- is_default -->
            <view class="lb-16"
              ><view v-if="item.is_default !== 1" @click="setDefalt(item.id)"
                >设置默认</view
              ><view
                style="margin-left: 20rpx"
                v-if="item.is_default === 0"
                @click=";(state.account = item.account), (state.show = true)"
                >解绑</view
              ></view
            >
          </view>
        </view>
      </view>
      <view class="lb-17" v-if="state.list.length == 0">
        <view class="lb-18">您还未添加银行卡</view>
        <view class="lb-19" @click="addbank">添加银行卡</view>
      </view>
    </view>
  </view>
  <u-modal
    :show-cancel-button="true"
    v-model="state.show"
    content="是否确认解绑银行卡"
    @confirm="unbindingConfirm"
  ></u-modal>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import {
  getBankCardList,
  delBankCard,
  setDefaultBankCard
} from '@/api/modules/user'

const state = reactive({
  show: false,
  account: '',
  list: [] as any
})
const getBankCardListData = () => {
  getBankCardList().then((result) => {
    state.list = result.data
  })
}
getBankCardListData()
//添加银行卡
const addbank = () => {
  uni.navigateTo({
    url: `/pages/my/my-wallet/add-bank-card`
  })
}
//解绑
const unbindingConfirm = () => {
  delBankCard({ account: state.account }).then(() => {
    uni.showToast({
      title: '解绑成功',
      icon: 'success'
    })
    getBankCardListData()
  })
}
//设置默认
const setDefalt = (id: string) => {
  setDefaultBankCard({ card_id: id }).then((result) => {
    uni.showToast({
      title: '设置默认成功',
      icon: 'success'
    })
    getBankCardListData()
  })
}
</script>
<style lang="less" scoped>
.lb-17 {
  text-align: center;
  width: 100%;
  margin-top: 50upx;

  .lb-18 {
    font-size: 30upx;
    color: #fff;
  }

  .lb-19 {
    font-size: 28upx;
    color: #fff;
    width: 686upx;
    height: 86upx;

    border-radius: 16upx;
    line-height: 86upx;
    background-image: linear-gradient(to right, #7e50d7, #2138cd);
    margin-top: 36upx;
  }
}
.lb-1 {
  width: 686upx;
  margin: 0 auto;
  margin-top: 20upx;

  .lb-6 {
    width: 686upx;
    height: 160upx;
    position: relative;
    margin-top: 25upx;

    .lb-7 {
      width: 686upx;
      height: 160upx;
      position: absolute;

      image {
        user-select: none;
        pointer-events: none;
        width: 686upx;
        height: 160upx;
        display: block;
      }
    }

    .lb-8 {
      width: 686upx;
      height: 160upx;
      position: absolute;
      padding: 0 30upx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .lb-9 {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .lb-10 {
          image {
            user-select: none;
            pointer-events: none;
            width: 80upx;
            height: 80upx;
            margin-right: 20upx;
            border-radius: 50%;
          }
        }

        .lb-11 {
          .lb-12 {
            color: #fff;
            font-size: 28upx;
          }

          .lb-13 {
            color: #ccc;
            font-size: 24upx;
            margin-top: 10upx;
          }
        }
      }

      .lb-14 {
        text-align: right;

        .lb-15 {
          color: #fcfcfc;
          font-size: 28upx;
          margin-top: 20rpx;
        }

        .lb-16 {
          color: #ccc;
          font-size: 24upx;
          margin-top: 50upx;
          display: flex;
        }
      }
    }
  }

  .lb-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .lb-3 {
      color: #fff;
      font-size: 30upx;

      .lb-4 {
        display: inline-block;
        font-size: 28upx;
        color: #ccc;
      }
    }

    .lb-5 {
      background-image: linear-gradient(
        to right,
        rgb(126, 80, 215),
        rgb(33, 56, 205)
      );
      float: right;
      color: #fff;
      border-radius: 30rpx;
      font-size: 20rpx;
      width: 176rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
    }
  }
}
</style>
